<!--
 * @Author: your name
 * @Date: 2022-01-19 10:24:19
 * @LastEditTime: 2023-07-06 16:20:21
 * @LastEditors: qxiang
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/imagePreview/demo.vue
-->
<script setup>
  import { ref } from 'vue';
import { ImagePreview } from '../../../packages/lib/index'
  import img1 from './img/1.jpg';
  import img2 from './img/2.2.jpg';
  import img3 from './img/3.3.jpg';
  let images = ref([])

  const previewVisible = ref(false)
  const selectIndex = ref(0)

  const fn = (index) => {
    images.value = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
      img1,
      img2,
    img3

    ]
    selectIndex.value = index
    previewVisible.value = true
  }
  </script>
  
  <template>
    <div>
      <button @click="fn(0)">图片查看器</button>
      <button @click="fn(1)">从第二张开始</button>
      <ImagePreview v-model:show="previewVisible" :select-index="selectIndex" :images="images"></ImagePreview>
    </div>
  </template>
  
  <style>
  </style>
  